<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveExport="false"
      :isHaveAdd="false"
      @toAdd="showEditDialog"
    >
      <template v-slot:table>
        <el-table ref="multipleTable" :data="list.data" v-loading="loading" header-row-class-name="head_color" stripe tooltip-effect="dark" style="width: 99.9%">
          <el-table-column label="门店信息" min-width="140">
            <template slot-scope="scope">
              <p><b>门店名称：</b>{{ scope.row.title }}</p>
              <p>
                <b>门店地区：</b>
                {{ scope.row.province + scope.row.city + scope.row.area }}{{ scope.row.add }}
              </p>
            </template>
          </el-table-column>

          <el-table-column label="产品信息" min-width="140">
            <template slot-scope="scope">
              <div class="user_table" v-if="$route.query.is_apply == 1">
                <p><span>待补货商品数：</span>{{ scope.row.bhcpsl }}</p>
                <p><span>待退货商品数：</span>{{ scope.row.thcpsl }}</p>
              </div>
              <div class="user_table" v-else>
                <p><span>产品品类总量：</span>{{ scope.row.cpplzl }}</p>
                <p><span>产品总量：</span>{{ scope.row.cpzl }}</p>
                <p><span>预警库存商品量：</span>{{ scope.row.yjkcspl }}</p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" min-width="140">
            <template slot-scope="scope">
              <el-button :loading="$store.state.isLoading" type="success" size="mini" v-if="$route.query.is_apply == 1" @click="toShopUrl1(scope.row.id)"> 查看补货单 </el-button>
              <el-button v-else :loading="$store.state.isLoading" type="success" size="mini" @click="toShopUrl(scope.row.id)"> 查看商品 </el-button>
              <el-button :loading="$store.state.isLoading" type="primary" size="mini" v-if="$route.query.is_apply == 1" @click="plchenk(scope.row.id)"> 批量审核 </el-button>
              <el-button :loading="$store.state.isLoading" v-else type="primary" size="mini" @click="showEditDialog(scope.row.id)"> 修改 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <ExtractEdit @parent="reload" :show.sync="myshow" :editId="editId" :clickNum="clickNum"></ExtractEdit>

    <el-dialog :close-on-click-modal="false" title="批量审核" :modal-append-to-body="false" :visible.sync="show_edit" class="tl size_13" width="600px">
      <el-form label-width="120px">
        <el-form-item label="审核状态：">
          <el-col :span="20">
            <el-radio-group v-model="editInfo.is_check">
              <el-radio label="0">待审核</el-radio>
              <el-radio label="1">审核通过</el-radio>
              <el-radio label="2">驳回</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item label="审核备注：">
          <el-col :span="20">
            <el-input type="textarea" v-model="editInfo.remark" size="small"></el-input>
          </el-col>
        </el-form-item>

        <div class="tc">
          <el-button :loading="$store.state.isLoading" size="small" type="primary" @click="plchenkbtn"> 确定 </el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import ExtractEdit from "@/components/mail/extract_edit.vue";
import { extractSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  data() {
    return {
      userSearchData: extractSearchData,
      searchAll: {},
      loading: false,
      list: [],
      pageSize: 10,
      currentPage: 1,
      myshow: false,
      editId: "",
      clickNum: 1,
      editInfo: {},
      show_edit: false,
    };
  },
  components: {
    ExtractEdit,
  },
  methods: {
    plchenk(id) {
      this.editInfo = {
        id: id,
        is_check: "0",
        remark: "",
      };
      this.show_edit = true;
    },
    plchenkbtn() {
      this.$swal({
        title: "您确定要批量审核吗",
        text: "审核后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要审核",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var params = JSON.parse(JSON.stringify(this.editInfo));
          this.$api.getStation.extract_stock_savecheck_pl(params).then((res) => {
            if (res.data.code == 200) {
              this.show_edit = false;
              this.$fnc.alertSuccess({ text: "操作成功" });
              this.getNewsAll(this.searchAll);
            } else {
              this.$fnc.alertError(res.data.code_desc, res.data.result);
            }
          });
        }
      });
    },
    toShopUrl1(id) {
      this.$store.commit("addbreadcrumbs", {
        title: "门店补货管理",
        url: `/index/operate_staff/extract_stock_apply?id=${id}&is_check=0`,
      });
      this.$router.push({
        path: "/index/operate_staff/extract_stock_apply",
        query: { id: id, is_check: 0 },
      });
    },
    toShopUrl(id) {
      this.$store.commit("addbreadcrumbs", {
        title: "门店商品管理",
        url: `/index/operate_staff/extract_stock?id=${id}`,
      });
      this.$router.push({
        path: "/index/operate_staff/extract_stock",
        query: { id },
      });
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getNewsAll();
    },
    imgError(item) {
      if (!item) {
        return require("@/assets/img/default_head.png");
      }
      if (item.indexOf("http") >= 0) {
        return item;
      } else {
        return "/api/" + item;
      }
    },
    getNewsAll(page, page_size) {
      this.loading = true;
      page = page || 1;
      page_size = page_size || 10;
      var data = this.searchAll || {};
      data.page = page;
      data.page_size = page_size;

      if (this.$route.query.is_apply) {
        data.is_apply = 1;
      } else {
        data.is_stock = 1;
      }
      this.$api.getUser.getExtractList(data).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      this.getNewsAll("", val);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.getNewsAll(val, this.pageSize);
    },
    showEditDialog(id) {
      this.myshow = true;
      this.editId = id;
      this.clickNum++;
    },
    reload() {
      this.getNewsAll();
    },
  },
  created() {
    this.getNewsAll();
  },
  watch: {
    $route() {
      this.getNewsAll();
    },
  },
};
</script>
<style lang="less" scoped>
.tab_div {
  font-size: 12px;
}
</style>
